<template>
	<div class="mavon-editor-box">
		<mavon-editor
			v-model="val"
			@input="emitVal"
			@imgAdd="$imgAdd"
			@imgDel="$imgDel"
			:toolbars="toolbars"
			ref="md"
			class="mavon-editor"
		/>
	</div>
</template>

<script>
import Vue from "vue";
import mavonEditor from "mavon-editor";
// markdown-it对象：md.s_markdown, md => mavonEditor实例
//                 or
//                 mavonEditor.markdownIt
import "mavon-editor/dist/css/index.css";
// use
Vue.use(mavonEditor);

import axios from "axios";
import { domain } from "@/config";
import { getCookie } from "@/utils/tool";

export default {
	name: "MarkdownEditor",
	props: {
		value: {
			type: String,
			default: "",
		},
		id: {
			type: String,
			required: false,
			default() {
				return "markdown-editor-" + +new Date() + ((Math.random() * 1000).toFixed(0) + "");
			},
		},
	},
	data() {
		return {
			val: "",
			toolbars: {
				bold: true, // 粗体
				italic: true, // 斜体
				header: true, // 标题
				underline: true, // 下划线
				strikethrough: true, // 中划线
				mark: true, // 标记
				superscript: true, // 上角标
				subscript: true, // 下角标
				quote: true, // 引用
				ol: true, // 有序列表
				ul: true, // 无序列表
				link: true, // 链接
				imagelink: true, // 图片链接
				code: false, // code
				table: true, // 表格
				// fullscreen: true, // 全屏编辑
				// readmodel: true, // 沉浸式阅读
				htmlcode: true, // 展示html源码
				help: true, // 帮助
				/* 1.3.5 */
				undo: true, // 上一步
				redo: true, // 下一步
				trash: true, // 清空
				// save: true, // 保存（触发events中的save事件）
				/* 1.4.2 */
				// navigation: true, // 导航目录
				/* 2.1.8 */
				// alignleft: true, // 左对齐
				// aligncenter: true, // 居中
				// alignright: true, // 右对齐
				/* 2.2.1 */
				subfield: true, // 单双栏模式
				preview: true, // 预览
			},
		};
	},
	watch: {
		value(val) {
			console.log(val);
			this.val = val;
		},
	},
	mounted() {
		// console.log(this.$refs.md.$img2Url)

		this.val = this.value;
	},
	methods: {
		$imgAdd(pos, $file) {
			var formdata = new FormData();
			formdata.append("file", $file);
			axios({
				method: "post",
				url: `${domain}admin/v1/minio/media/upload`,
				data: formdata,
				headers: {
					Authorization: decodeURIComponent(getCookie("login_ticket")),
					"Content-Type": "application/x-www-form-urlencoded",
				},
			}).then((res) => {
				console.log(res.data.data);
				this.$refs.md.$img2Url(pos, res.data.data);
				// $vm && $vm.$img2Url(pos, url);
			});
		},
		$imgDel() {},
		emitVal() {
			this.$emit("val", this.val);
		},
	},
};
</script>

<style scoped lang="less">
.mavon-editor-box {
	height: 100%;
	/deep/ .shadow img {
		position: initial;
	}
}
.mavon-editor {
	height: 100%;
}
</style>
